Kc's blog

Appearance

kc_shen2026-07-08
1568
5.8m

接入 Playwright，实现 E2E 自动化测试 ​

在日常开发中，每次修改代码后，我们都会重复做一些相同的工作：

  • 登录系统
  • 点击菜单
  • 搜索数据
  • 新增、编辑、删除
  • 检查页面是否正常显示

这些操作虽然简单，但非常耗时，而且容易遗漏。如果每次发布都依赖人工回归测试，不仅效率低，还可能因为遗漏某个操作导致线上 Bug。

有没有一种方式，让电脑像真实用户一样自动完成这些操作？

答案就是 E2E（End-to-End，端到端）自动化测试。

什么是 E2E 测试？ ​

E2E（End-to-End）测试就是模拟真实用户操作，对整个业务流程进行自动化验证。

例如登录功能：

text
打开浏览器
    ↓
访问登录页
    ↓
输入用户名
    ↓
输入密码
    ↓
点击登录
    ↓
进入首页

整个过程由程序自动完成，无需人工参与。

它测试的不仅是某一个函数，而是整个系统是否能够正常运行。

为什么选择 Playwright？ ​

目前主流的 E2E 自动化测试工具主要有：

  • Playwright
  • Cypress
  • Selenium

如果是一个新的前端项目，我更推荐使用 Playwright。

原因很简单：

  • 学习成本低
  • API 简洁
  • 支持主流浏览器
  • 调试体验优秀
  • 社区活跃，更新频繁
  • 对 Vue、React、Angular 等框架都适用

对于现代前端项目来说，它几乎已经成为 E2E 自动化测试的首选方案。

Playwright 十大特色能力 ​

Playwright 不只是一个自动化测试工具，它还有很多提升开发效率的能力。

1. 自动等待（Auto Waiting） ​

无需手动编写各种等待逻辑，Playwright 会自动等待元素可见、可点击，大幅降低测试失败率。

2. Codegen 自动录制 ​

执行：

bash
npx playwright codegen

即可录制浏览器操作，自动生成测试代码，非常适合新手快速上手。

3. Trace 调试 ​

测试失败后，可以像看录像一样回放整个测试过程，包括点击、输入、网络请求、DOM 变化等信息，定位问题非常方便。

4. 自动截图和录像 ​

测试失败时可以自动保存截图和视频，帮助快速分析问题，无需重新运行测试。

5. 多浏览器支持 ​

同一套测试代码即可运行在：

  • Chromium
  • Firefox
  • WebKit（Safari）

真正做到一次编写，多浏览器验证。

6. 并行执行 ​

多个测试可以同时运行，大幅缩短执行时间，非常适合 CI/CD。

7. 网络请求 Mock ​

支持拦截接口并返回模拟数据，即使后端接口未完成，也可以提前进行页面测试。

8. API Testing ​

除了操作浏览器，还可以直接发送 HTTP 请求，实现接口测试与页面测试统一管理。

9. 登录状态复用 ​

登录一次即可保存登录状态，后续测试无需重复登录，提高执行效率。

10. 丰富的测试报告 ​

内置 HTML 测试报告，支持查看执行结果、耗时、截图、录像等信息，方便团队排查问题。

安装 Playwright ​

进入项目根目录，执行：

bash
npm init playwright@latest

安装过程中按照默认配置即可。

安装完成后，项目中会新增：

text
tests/
playwright.config.ts

其中：

  • tests：存放测试用例
  • playwright.config.ts：测试配置文件

编写第一个测试 ​

新建：

text
tests/login.spec.ts

代码如下：

typescript
import { test, expect } from '@playwright/test';

test('登录成功', async ({ page }) => {

  await page.goto('http://localhost:3000/login');

  await page.getByPlaceholder('用户名').fill('admin');

  await page.getByPlaceholder('密码').fill('123456');

  await page.getByRole('button', { name: '登录' }).click();

  await expect(page).toHaveURL(/home/);

});

运行测试：

bash
npx playwright test

浏览器会自动打开，完成整个登录流程。

Codegen：最快的编写方式 ​

推荐大家先学会使用 Codegen。

执行：

bash
npx playwright codegen http://localhost:3000

浏览器中的每一步操作都会自动生成对应代码。

例如：

typescript
await page.getByPlaceholder('用户名').fill('admin');

await page.getByPlaceholder('密码').fill('123456');

await page.getByRole('button', { name: '登录' }).click();

很多简单的测试，几乎不需要自己手写。

常用 API ​

打开页面 ​

typescript
await page.goto('/login');

输入内容 ​

typescript
await page.getByPlaceholder('用户名').fill('admin');

点击按钮 ​

typescript
await page.getByRole('button', {
  name: '登录'
}).click();

获取文本 ​

typescript
const text = await page.locator('.title').textContent();

判断元素存在 ​

typescript
await expect(
  page.getByText('登录成功')
).toBeVisible();

判断页面跳转 ​

typescript
await expect(page).toHaveURL(/home/);

查看测试报告 ​

执行：

bash
npx playwright test --reporter=html

然后：

bash
npx playwright show-report

浏览器会自动打开测试报告，可以查看：

  • 测试是否通过
  • 执行耗时
  • 错误信息
  • 截图
  • Trace
  • 视频

调试效率非常高。

推荐的项目结构 ​

随着测试越来越多，建议采用 Page Object Model（POM）模式组织代码。

text
tests/

pages/
    LoginPage.ts
    UserPage.ts
    OrderPage.ts

specs/
    login.spec.ts
    user.spec.ts
    order.spec.ts

utils/

把页面操作封装到 Page 中，可以减少重复代码，提高维护性。

企业项目实践建议 ​

E2E 测试并不是覆盖所有页面，而是优先覆盖最核心的业务流程。

例如：

  • 登录
  • 权限验证
  • 查询列表
  • 新增数据
  • 编辑数据
  • 删除数据
  • 文件上传
  • 文件下载
  • 导出报表
  • 支付流程

对于一些静态页面或展示型页面，没有必要投入过多自动化测试成本。

遵循 20% 的核心流程覆盖 80% 的业务风险，往往比追求 100% 覆盖率更有价值。

总结 ​

Playwright 已经成为现代前端自动化测试的主流选择。

它不仅提供了简洁的 API，更集成了自动等待、Codegen、Trace、Mock、多浏览器支持等一系列实用能力，让编写、调试和维护自动化测试变得更加轻松。

如果你的项目还停留在人工回归测试阶段，不妨从最核心的业务流程开始，例如登录、查询、新增等功能，逐步建立自己的自动化测试体系。随着测试用例不断积累，每次发布都可以自动验证关键流程，不仅能减少重复劳动，也能显著提升项目质量和团队开发效率。

最近更新